<template>
    <div id="home">
       <el-row>
        <el-col :span="8" style="padding-right: 10px">
            <!--左上方卡片-->
           <el-card >
           <div class="user">
            <img src="../assets/image/user.png" alt="">
            <div class="userinfo">
                <p class="name">Admin</p>
                <p class="access">超级管理员</p>
            </div>
           </div>

           <div class="login-info">
            <p>上次登入时间：<span>2022-12-08</span></p>
            <p>上次登入地点：<span>武汉</span></p>
           </div>
           </el-card>
           <!--左下方卡片-->
           <el-card style="margin-top: 20px">
            <el-table :data="tableData">
     <el-table-column prop="name" label="手机品牌">
      </el-table-column>
      <el-table-column prop="todayBuy" label="今日购买">
      </el-table-column>
      <el-table-column prop="monthBuy" label="本月购买">
      </el-table-column>
      <el-table-column prop="totalBuy" label="总购买">
      </el-table-column>
    </el-table>
           </el-card>
        </el-col>

        <el-col :span="16" style="padding-left: 10px">
            <!--右上-->
            <div class="num">
                <el-card v-for="(item,  index) in countData" :key="index" :body-style="{display: 'flex',margin: '0px',padding: '0px'}">
                      <i class="icon" :class="'el-icon-'+item.icon" :style="{backgroundColor: item.color}"></i>
                      <div class="detail">
                        <p class="price">￥{{item.value}}</p>
                        <p class="name">{{item.name}}</p>
                    </div>
                </el-card>
            </div>
      <!--右中-->
      <el-card  style="height: 280px">
    <div ref="echarts1" style="height: 280px;width: 800px"></div>
</el-card>
      <!--右下-->
      <div class="gai">
        <el-card style="height: 260px;width: 48%" >
         <div ref="echarts2" style="height: 260px;width: 400px"> </div>
        </el-card>
        <el-card style="height: 260px;width: 48%">
         <div ref="echarts3" style="height: 260px;width: 400px"></div>
        </el-card>
      </div>
        </el-col>
       </el-row>
    </div>
    </template>

<script>
import * as echarts from 'echarts'
export default {
    data() {
        return {
            //左下方数据
            tableData: [],
            countData: [
                {
                    name: "今日支付订单",
                    value: 1234,
                    icon: "success",
                    color: "#2ec7c9",
                },
                {
                    name: "今日收藏订单",
                    value: 210,
                    icon: "star-on",
                    color: "#ffb980",
                },
                {
                    name: "今日未支付订单",
                    value: 1234,
                    icon: "s-goods",
                    color: "#5ab1ef",
                },
                {
                    name: "本月支付订单",
                    value: 1234,
                    icon: "success",
                    color: "#2ec7c9",
                },
                {
                    name: "本月收藏订单",
                    value: 210,
                    icon: "star-on",
                    color: "#ffb980",
                },
                {
                    name: "本月未支付订单",
                    value: 1234,
                    icon: "s-goods",
                    color: "#5ab1ef",
                },
            ],
           //右中数据
           option1 :{},
           //右下左数据
           option2: {
          legend: {
            // 图例文字颜色
            textStyle: {
              color: "#333",
            },
          },
          grid: {
            left: "20%",
          },
          // 提示框
          tooltip: {
            trigger: "axis",
          },
          xAxis: {
            type: "category", // 类目轴
            data: [],
            axisLine: {
              lineStyle: {
                color: "#17b3a3",
              },
            },
            axisLabel: {
              interval: 0,
              color: "#333",
            },
          },
          yAxis: [
            {
              type: "value",
              axisLine: {
                lineStyle: {
                  color: "#17b3a3",
                },
              },
            },
          ],
          color: ["#2ec7c9", "#b6a2de"],
          series: [],
           },
           //右下右数据
           option3: {
            tooltip: {
            trigger: "item",
          },
          color: [
            "#0f78f4",
            "#dd536b",
            "#9462e5",
            "#a6a6a6",
            "#e1bb22",
            "#39c362",
            "#3ed1cf",
          ],
          series: [],
           }
        }
    },
   async mounted(){
      //获取数据
        let {data} =await this.$http.get("/dada")
        // console.log(data)
        //左下数据
        this.tableData=data.data.tableData 
        //右中数据
           var myChart = echarts.init(this.$refs.echarts1)
        let xAxis={
            data: Object.keys(data.data.orderData.data[0]) 
        }
        let legend={
            data:  Object.keys(data.data.orderData.data[0]) 
        }
        let series=[]
      xAxis.data.forEach((item)=>{
        series.push({
             name: item,
             type: 'line',
              data: data.data.orderData.data.map((item1)=>item1[item])
        })
      })
    this.option1={
        xAxis: xAxis,
        yAxis: {},
        legend: legend,
        series: series
    }
        myChart.setOption(this.option1);
        //右下左数据
        var myChart1 = echarts.init(this.$refs.echarts2)
        let xAxisData= data.data.userData.map((item)=>item.date)
        this.option2.xAxis.data=xAxisData
        this.option2.series.push({
            name: "新增用户",
            data: data.data.userData.map((item)=>item.new),
            type: 'bar'
        })
        this.option2.series.push({
            name: "活跃用户",
            data: data.data.userData.map((item)=>item.active),
            type: 'bar'
        })
        myChart1.setOption(this.option2);
        //右下右数据
        var myChart2 = echarts.init(this.$refs.echarts3)
        this .option3.series.push({
            data: data.data.videoData,
            type: "pie"
        })
        myChart2.setOption(this.option3);
    },
    methods: {
    }
}
</script>

<style lang="less" scoped>
.user {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;

    img {
        width: 150px;
        height: 150px;
        border-radius: 100%;
        margin-right: 40px
    }

    .userinfo {
        .name {
            font-size: 32px;
            margin-bottom: 10px
        }

        .access {
            color: #999
        }
    }
}

.login-info {
    p {
        line-height: 28px;
        font-size: 14px;
        color: #999;

        span {
            color: #666;
            margin-left: 60px
        }
    }
}
.num{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .icon{
        width: 80px;
        height: 80px;
        font-size: 30px;
        text-align: center;
        line-height: 80px;
        color: #fff
    }
    .detail{
        margin-left: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .price{
            font-size: 30px;
            margin-bottom: 10px
        }
        .name{
            font-size: 14px;
            color: #999;
     
        }
    }
    .el-card{
        width: 32%;
        margin-bottom: 20px;
    }
}
.gai{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

</style>